<script setup>
import {
  deleteInternshipMaterialApi,
  fuzzyQueryApi,
  getInternshipMaterialListApi,
  studentFindInternshipMaterialApi,
  uploadInternshipMaterialInfoApi,
  uploadStudentInternshipMaterialsApi
} from '@/api/job'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/practice/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import FormJob from '@/components/Job/form.vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { getPracticeApplyByStudentApi } from '@/api/baseData'

const router = useRouter()
const userStore = useUserStore()
// **********************筛选表**********************
const formData = ref({
  desc: ''
})
const formModel = [
  {
    prop: 'desc',
    label: '材料',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
] /**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

const formRef = ref(null)
const pagizationToatl = ref(null)
// 列表数据
const tableData = ref([])
// 列表数据
const tableDataNeed = ref([])
/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res2 = await getPracticeApplyByStudentApi({
    account: userStore.userInfo.account
  })
  // 添加空值检查
  const typeArr = res2.data?.map((item) => item.type) || []
  const res = await studentFindInternshipMaterialApi({
    ...data,
    account: userStore.userInfo.account,
    college: userStore.userInfo.college,
    major: userStore.userInfo.major,
    class: userStore.userInfo.class
  })


  let value = null
  
  const collegeData=res.data.filter((item)=>item.college==='*'|| item.college==userStore.userInfo.college)
  const majorData=collegeData.filter((item)=>item.major==='*'|| item.major==userStore.userInfo.major || item.major=='["*"]')
  const classData=majorData.filter((item)=>item.class==='*'|| item.class==userStore.userInfo.class || item.class=='["*"]'||JSON.parse(item.class).includes(userStore.userInfo.class))
  let resulte = classData
    .filter((item) => item !== undefined)
    .map((item) => {
      return {
        ...item
      }
    })
  // 确保typeArr是数组后再进行过滤
  console.log(majorData);
  // console.log(resulte);
  
  tableDataNeed.value = resulte.filter((item) => !typeArr.includes(item.type))
  tableData.value = resulte.filter((item) => typeArr.includes(item.type))
  // console.log(tableDataNeed.value)
  // console.log(tableData.value)
  // console.log(resulte)

  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  console.log(data)

  queryData.value = data
  const res = await fuzzyQueryApi(data)
  tableData.value = res.data?.map((item) => {
    return {
      ...item
    }
  })
  pagizationToatl.value = res.total
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

const STATUS_MAP = {
  0: { label: '未提交', type: 'info' },
  1: { label: '已提交', type: 'warning' },
  2: { label: '已通过', type: 'success' },
  3: { label: '未通过', type: 'danger' }
}
const columns = [
  {
    prop: 'type',
    label: '实习材料类型',
    width: '200'
  },
  {
    prop: 'desc',
    label: '实习材料名称',
    width: '200'
  },
  {
    prop: 'material',
    label: '模版文件',
    width: '120',
    display: 'button',
    buttonText: '下载模版',
    buttonType: 'primary'
  },
  {
    prop: 'status',
    label: '状态',
    width: '100',
    display: 'tag',
    formatter: (row) => STATUS_MAP[row.status]
  },
  {
    prop: 'feedbackDesc',
    label: '结果反馈',
    display: 'feedback',
    width: '200',
    showOverflowTooltip: true
  }
]
const needcolumns = [
  {
    prop: 'type',
    label: '实习材料类型',
    width: '200'
  },
  {
    prop: 'desc',
    label: '实习材料名称',
    width: '200'
  },
  {
    prop: 'material',
    label: '模版文件',
    width: '120',
    display: 'button',
    buttonText: '下载模版',
    buttonType: 'primary'
  }
]
const options = [
  {
    label: '上传材料',
    type: 'primary',
    prop: 'submitMaterial',
    icon: 'Upload'
  }
]
const needoptions = [
  {
    label: '请先提交实习申请',
    type: 'primary',
    prop: 'submitMaterial',
    icon: 'Upload'
  }
]

const docPreview = ref('')
const dialogViewVisible = ref(false)
// 下载材料
async function handletTableMaterial(data) {
  const fileNamePop = data.material.split('/').pop().split('.').pop()
  const res = await axios({
    method: 'get',
    url: data.material,
    responseType: 'blob'
  })

  const blob = new Blob([res.data], {
    type: 'application/octet-stream' // 通用文件流类型
  })
  const fileName = `${data.desc}.${fileNamePop}`
  const a = document.createElement('a')
  const url = URL || window.webkitURL
  const href = url.createObjectURL(blob)
  a.style.display = 'none'
  a.href = href
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  url.revokeObjectURL(href)
}

function handletTableSubmitMaterial(data) {
  // 先重置 FormJobData
  FormJobData.value = {
    studentMaterialType: '',
    studentMaterialDesc: '',
    studentMaterial: ''
  }
  // 再设置新的值
  dialogTableVisible.value = true
  FormJobData.value.studentMaterialDesc = data.desc
  FormJobData.value.studentMaterialType = data.type
}
function handletTableFeedbackDesc(data) {
  ElMessageBox.alert(`${data.feedbackDesc}`, '查看反馈', {
    confirmButtonText: '确认'
  })
}
/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-'edit'-'delete'
 */
function handleTable(data, type) {
  // console.log(data, type)
  switch (type) {
    case 'material':
      handletTableMaterial(data)
      break
    case 'submitMaterial':
      handletTableSubmitMaterial(data)
      break
    case 'feedbackDesc':
      handletTableFeedbackDesc(data)
      break

    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 弹窗显示
const dialogTableVisible = ref(false)
const FormJobData = ref({
  studentMaterialType: '',
  studentMaterialDesc: '',
  studentMaterial: ''
})
const formJobOpt = [
  {
    prop: 'studentMaterialType',
    label: '实现材料名称',
    type: 'input',
    disabled: true
  },
  {
    prop: 'studentMaterialDesc',
    label: '实现材料名称',
    type: 'input',
    disabled: true
  },
  {
    prop: 'studentMaterial',
    label: '上传材料',
    type: 'studentMaterial'
  }
]
const btnJobOpt = [
  {
    name: '取消',
    btnType: 'info',
    prop: 'cancel'
  },
  {
    name: '提交',
    btnType: 'success',
    prop: 'submit'
  }
]

const formJobRef = ref(null)
//dialog关闭前的回调
function handleDialogClose() {
  // 对话框关闭时重置状态
  FormJobData.value = {
    studentMaterialDesc: '',
    studentMaterial: ''
  }
}
async function addForm() {
  dialogTableVisible.value = true
}

async function handleSubmit(data) {
  console.log(data)
  let info = {
    studentAccount: userStore.userInfo.account,
    studentClass: userStore.userInfo.class,
    studentMaterial: data.studentMaterial,
    studentMaterialDesc: data.studentMaterialDesc,
    studentMaterialType: data.studentMaterialType,
    studentName: userStore.userInfo.name
  }

  const res = await uploadStudentInternshipMaterialsApi(info)
  showStatusMessage(res)
  dialogTableVisible.value = false
  getTableData()
}
</script>

<template>
  <div class="practice-material">
    <div class="page-header">
      <h1 class="animated-title">实习材料管理</h1>
    </div>
    <div class="content-wrapper">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
        class="form-container"
      />
      <div class="section-title animate-fade-in">
        <span>需要提交的实习材料，但未提交申请或申请未通过</span>
      </div>
      <div class="table-container">
        <Table
          :tableData="tableDataNeed"
          :columns="needcolumns"
          @handleTable="handleTable"
          border
          stripe
          highlight-current-row
          class="animate-slide-in"
        >
          <template #firstColumn>
            <el-table-column type="index" label="序号" width="80" align="center" />
          </template>
        </Table>
      </div>
      <div class="section-title animate-fade-in">
        <span>可以提交的实习材料</span>
      </div>
      <div class="table-container">
        <Table
          :tableData="tableData"
          :columns="columns"
          :options="options"
          @handleTable="handleTable"
          border
          stripe
          highlight-current-row
          class="animate-slide-in"
        >
          <template #firstColumn>
            <el-table-column type="index" label="序号" width="80" align="center" />
          </template>
        </Table>
      </div>

      <div class="pagination-container">
        <Pagization
          ref="pagizationRef"
          :total="pagizationToatl"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 上传资料对话框 -->
    <el-dialog
      v-model="dialogTableVisible"
      title="上传实习资料"
      width="500"
      @close="handleDialogClose"
      destroy-on-close
      class="custom-dialog"
    >
      <FormJob
        ref="formJobRef"
        :data="FormJobData"
        :form-opt="formJobOpt"
        :btn-opt="btnJobOpt"
        @handleForm="handleForm"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.practice-material {
  padding: 10px;
  min-height: 100vh;
  //background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  flex-direction: column;

  .page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    .animated-title {
      font-size: 2.5rem;
      color: #2c3e50;
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: -5px;
        left: 0;
        background: linear-gradient(90deg, #3498db, #2ecc71);
        transform: scaleX(0);
        transform-origin: left;
        animation: titleUnderline 2s ease-in-out infinite;
      }
    }
  }

  .content-wrapper {
    width: 1700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .form-container {
    margin-bottom: 30px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
    }
  }

  .section-title {
    font-size: 1.2rem;
    color: transparent;
    margin: 20px 0;
    padding: 15px 20px;
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    animation:
      gradientBG 8s ease infinite,
      float 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: translateX(-100%);
      animation: shimmer 2s infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: rotate 8s linear infinite;
      z-index: 1;
    }

    span {
      display: inline-block;
      background: linear-gradient(45deg, #3498db, #2ecc71, #3498db);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      animation: textGradient 3s linear infinite;
      position: relative;
      z-index: 2;
    }
  }

  @keyframes textGradient {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }

  @keyframes gradientBG {
    0% {
      background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
    }
    25% {
      background: linear-gradient(90deg, rgba(46, 204, 113, 0.1), rgba(52, 152, 219, 0.1));
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
    }
    50% {
      background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
    }
    75% {
      background: linear-gradient(90deg, rgba(46, 204, 113, 0.1), rgba(52, 152, 219, 0.1));
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
    }
    100% {
      background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
    }
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes glow {
    0%,
    100% {
      text-shadow:
        0 0 5px rgba(52, 152, 219, 0.5),
        0 0 10px rgba(46, 204, 113, 0.5);
    }
    50% {
      text-shadow:
        0 0 10px rgba(52, 152, 219, 0.8),
        0 0 20px rgba(46, 204, 113, 0.8);
    }
  }

  .table-container {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
  }

  .pagination-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
  }

  .custom-dialog {
    :deep(.el-dialog) {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
  }
}

// 动画定义
@keyframes titleUnderline {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 美化滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #3498db, #2ecc71);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

// 表格行悬停效果
:deep(.el-table__row) {
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// 按钮悬停效果
:deep(.el-button) {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}
</style>
